<template>
  <div class="div1">
    <div class="div2">
        <div class="div2-1">
            <div class="div2-2">
                <div @mouseenter="mousedown"><p v-for="item in BigClass" :key="item.id"  @mouseenter="handleMouseEnter(item.id)">{{ item.subjectType }}</p></div>
            </div>
        </div>
        
        <div class="div3">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item,index) in imageIds" :key="index" >
                  <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item}`" class="image">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
    <div class="div4" v-if="aaaa" @mouseleave="mouseenter" ><p  v-for="item in SmallClass" :key="item.id">{{ item.courseName }}</p> </div>
    <div class="div5">
        <div class="div5-1">
            <p class="p1"><span>直播公开课</span>
                <img src="../../assets/1.png" class="img1"/>
            </p>
        </div>
        <!-- @click="zhibo(item.id)" -->
        <div class="div5-2"  v-for="(item,index) in listLiveDate" :key="index" @click="zhibo(item.id)">
            <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item.coverId}`" class="img2"/>
            <p class="p2-1">{{item.liveTitle}}</p>
            <p class="p2-2"><span>王俊涵</span><span class="span1">Javajava</span> <el-button type="primary" round style="width:70px;height:30px; font-size:14px;line-height:5px;margin-right: 15px;margin-top: -4px; float: right;"><span style="margin-left:-9px;">马上看</span></el-button> </p>
        </div>
    </div>
    <div class="div6" >
        <div class="div5-1">
            <p class="p1"><span>精选课</span>
                <img src="../../assets/1.png" class="img1" style="margin-right: 1080px;"/>
            </p>
        </div>
        <div class="div6-3" v-for="item in homePage.slice(0,4)" :key='item.id' @click="jingxuan(item.id)" >
            <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item.imageId}`" class="img2"/>
            <p class="p3">{{item.courseTitle}}</p>
            <p class="p3-1">时间：{{ item.beginTime }}</p>
            <p class="p3-2"><span>导师：</span><span>{{ item.tname }}</span>&nbsp;&nbsp;<span></span></p>
            <p class="p3-3"> <span style="font-size:12px; float: left; margin-top: 32px; ">已有149人购买</span> <span style="font-size:20px; float: right; margin-top: 24px; color: red;">
            ￥{{ item.price }}</span></p>
        </div>
    </div>
    <div class="div7">
        <div class="div5-1">
            <p class="p1"><span>免费课程</span>
                <img src="../../assets/1.png" class="img1" style="margin-right: 1055px;"/>
            </p>
        </div>
        <div class="div7-3" v-for="item in homePageFree.slice(0,4)" :key='item.id' @click="mianfei(item.id)">
            <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item.imageId}`" class="img2"/>
            <p class="p4">{{item.courseTitle}}</p>
            <p class="p4-1">时间：随到随学</p>
            <p class="p4-2"><span>导师：</span><span>{{ item.tname }}</span></p>
            <p class="p4-3"><span style="font-size:20px; float: right; margin-top: 24px; color: red;">免费</span></p>
        </div>
    </div>
    <div class="div8">
        <div class="div5-1">
            <p class="p1"><span>微专业</span>
                <!-- <img src="../../assets/1.png" class="img1" style="margin-right: 1055px;"/> -->
            </p>
        </div>
        <div class="div8-3" v-for="item in homePageMicro.slice(0,4)" :key='item.id' @click="jingxuan(item.id)">
          <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item.imageId}`" class="img2"/>
            <!-- <img src="../../assets/5.png" class="img2"/> -->
            <p class="p5">{{ item.courseTitle }}</p>
        </div>
    </div>
    <div class="div9">
        <div class="div5-1">
            <p class="p1"><span>新课推荐</span>
            </p>
        </div>
        <div class="div9-3"  v-for="item in homePageNewAll.slice(0,4)" :key='item.id' @click="jingxuan(item.id)">
            <img :src="`http://101.43.223.224:8765/image/getImageById?id=${item.imageId}`" class="img2"/>
            <p class="p6">{{item.courseTitle}}</p>
            <p class="p6-1">时间：随到随学</p>
            <p class="p6-2"><span>导师：</span><span>{{ item.tname }}</span></p>
            <p class="p6-3"><span style="font-size:20px; float: right; margin-top: 24px; color: red;">￥{{ item.price }}</span></p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data () {
        return{
            // 直播数据列表
            listLiveDate: [],
            //获取精选课程
            homePage: [],
            // 获取轮播图数据
            imgList: {},
            // 获取免费课程
            homePageFree: [],
            // 获取新课推荐数据
            homePageNewAll: [],
            // 获取微专业课程数据
            homePageMicro: [],
            // 获取大课程数据
            BigClass: [],
            // 获取小课程数据
            SmallClass: [],
            aaaa:false,
            idl: 3,
            imageIds: [],
            
            
        }
    },
    mounted () {
      //首页数据
      this.homePageAllFree()
      //轮播图数据
      this.RotaionAll()
      // 查询直播
      this.selectListLiveDate()
      // 获取精选课数据
      this.homePageSelected()
      // 获取新课推荐数据
      this.homePageNewAllCharge()
      // 获取微专业课程数据
      this.homePageMicroAllCharge()
      // 获取大课程数据
      this.BigClassList()
      // 获取小课程数据
      this.SmallClassList()
    },
    methods:{
      // 查询直播数据列表
       selectListLiveDate() {
          this.$axios.get("/live/listLive", {
            }).then(res => {
                if (res.data.flag){
                    this.listLiveDate = res.data.data
                    this.$message.success('获取直播信息成功！')
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        mousedown () {
            this.aaaa = true
        },
        mouseenter () {
           this.aaaa = false
        },
        // 点击直播跳转直播页面
        zhibo(data){
          console.log(data)
          this.$router.push({name: 'LiveDetail', query: {id: data}})
        },
        // 点击精选课跳转页面
        jingxuan(data){
          console.log(data)
          this.$router.push({name: 'order', query: {id: data}})
        },
        // 点击免费课跳转页面
        mianfei(data){
          console.log(data)
          this.$router.push({name: 'order', query: {id: data}})
        },
        // 获取首页数据免费课程
        homePageAllFree() {
          this.$axios.get("/conrse/homePageAllFree", {
            }).then(res => {
                if (res.data.flag){
                    this.homePageFree = res.data.data
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        //获取首页精选课程
        homePageSelected() {
          this.$axios.get("/conrse/homePageSelected", {
            }).then(res => {
                if (res.data.flag){
                  debugger
                    this.homePage = res.data.data
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        //获取首页新课推荐
        homePageNewAllCharge() {
          this.$axios.get("/conrse/homePageNewAllCharge", {
            }).then(res => {
                if (res.data.flag){
                  debugger
                    this.homePageNewAll = res.data.data
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        // 获取微专业课程推荐 
        homePageMicroAllCharge() {
          this.$axios.get("/conrse/homePageMicroAllCharge", {
            }).then(res => {
                if (res.data.flag){
                    this.homePageMicro = res.data.data
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        // 获取大课程
        BigClassList() {
          this.$axios.get("/conrse/BigClassList", {
            }).then(res => {
                if (res.data.flag){
                    this.BigClass = res.data.data
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        // 获取小课程
        SmallClassList() {
          this.$axios.get("/conrse/SmallClassList", {
            params: {
              subjectId: this.subjectId
            }
            
            }).then(res => {
              console.log("22222")
              // console.log(this.smallid)
                if (res.data.flag){
                    this.SmallClass = res.data.data
                    console.log(this.SmallClass)
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        handleMouseEnter(data) {
          this.subjectId = data
          console.log('鼠标移入');
          console.log(this.subjectId);
          this.SmallClassList()
    },
        //获取轮播图数据
        RotaionAll() {
          this.$axios.get("/conrse/RotaionAll", {
            params: {
              id : this.idl
            }
            }).then(res => {
                if (res.data.flag){
                    this.imgList = res.data.data
                    this.imageIds = res.data.data.imageId.split(',')
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
    },

}
</script>

<style scoped>
div{
  font-family: 微软雅黑;
}
.div1{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.div2{
    width: 1200px;
    height: 320px;
    /* margin: 0 auto; */
    /* background-color: #ada9a9; */
    position: relative;
}
.div2-1{
    width: 400px;
    height: 310px;
    float: left;
    background-color: #ffffff;
}
.div3{
    width: 800px;
    height: 320px;
    float: right;
    /* background-color: rgb(140, 136, 136); */
    
    z-index: 100;
}
.div2-2{
    width: 400px;
    height: 30px;
    color: #000000;
    font-size: 23px;
    display: block; 
    line-height: 20px;
    display: block;
}
.div2-3{
    width: 400px;
    height: 300px;
    background-color: aliceblue;
}
.div4{
    width: 400px;
    height: 312px;
    background-color: #ffffff;
    float: left;
    position: absolute;
    top: 60px;
    margin-left: 400px;
    z-index: 1000;
}
.el-carousel__item h3 {
    height: 320px;
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 320px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .div5{
    width: 1200px;
    height: 370px;
    margin-top: 2px;
    /* float: left; */
    /* background-color: #c3c2c2; */
  }
  .div5-1{
    width: 100%;
    height: 50px;
  }
  .div5-1 .p1{
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    line-height: 50px;
    margin-left: 10px;
  }
  .div5-1 .img1{
    width: 30px;
    height: 20px;
    float: right;
    margin-right: 1030px;
    margin-top: 12px;
  }
  .div5-2{
    width: 290px;
    height: 318px;
    float: left;
    margin-top: 1px;
    margin-left:10px ;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    transition: all .3s;
    /* box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out; */
  }
  .div5-2:hover {
    margin-top: -5px;
    /* box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025); */
    }
.img2{
    width: 290px;
    height: 200px;
    border-radius: 6px;
    float: left;
    /* 图片100%*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
 .p2{
    color: #000000;
    font-size: 16px;
    float: left;
    margin-top: 8px;
    margin-left: 5px;
  }
 .p2-1{
    color: #000000;
    font-size: 16px;
    float: left;
    margin-top: 14px;
    margin-left: 5px;
    width: 100%;
    height: 48px;
    line-height: 24px;
    /* 溢出隐藏 */
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .p2-2{
    width: 290px;
    height: 30px;
    float: left;
    color: #000000;
    font-size: 16px;
    margin-top: 280px;
    margin-left: 5px;
    position: absolute;
    
  }
  
  .span1{
    /* width: 35px; */
    height: 20px;
    line-height: 16px;
    background: rgba(255, 152, 48, 0.04);
    border: 0.5px solid rgba(255, 152, 48, 0.4);
    border-radius: 4px;
    color: #FF9830;
    font-size: 12px;
    display: inline-block;
    margin-left: 12px;
    padding: 0 4px;
    box-sizing: border-box;
    margin-top: -6px;
  }
 .p2-3{
    width: 100%;
    height: 30px;
    float: left;
    color: #000000;
    font-size: 14px;
    margin-top: -9px;
    margin-left: 2px;
  }
  .div5-3{
    width: 290px;
    height: 318px;
    float: left;
    margin-left: 13px;
    margin-top: 1px;
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    transition: all .3s;
    /* box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out; */
  }
  .div5-3:hover {
    margin-top: -5px;
    /* box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025); */
    }

.div6{
    width: 1200px;
    height: 400px;
    margin-top: 40px;
  }
  .div6-2{
    width: 290px;
    height: 350px;
    float: left;
    margin-top: 1px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    margin-left: 10px;
    /* transition: all .3s; */
    box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out;
  }
  .div6-2:hover {
    /* margin-top: -5px; */
    box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025);
    }
  .p3{
    color: #000000;
    font-size: 16px;
    float: left;
    margin-top: 8px;
    margin-left: 14px;
  }
 .p3-1{
    color: #000000;
    font-size: 12px;
    float: right;
    margin-top: 1px;
    margin-right: 128px;
  }
  .p3-2{
    width: 100%;
    height: 30px;
    float: left;
    color: #000000;
    font-size: 12px;
    margin-top: -8px;
    margin-left: 5px;
  }
 .p3-3{
    width: 96%;
    height: 60px;
    float: left;
    color: #000000;
    font-size: 14px;
    margin-top: -9px;
    margin-left: 7px;
    /* background-color: #ada9a9; */
    border-top: 1px solid #ada9a9;
    
  }
  .div6-3{
    width: 290px;
    height: 375px;
    float: left;
    margin-top: 1px;
    margin-left: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    /* transition: all .3s; */
    box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out;
  }
  .div6-3:hover {
    /* margin-top: -5px; */
    box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025);
    }

.div7{
    width: 1200px;
    height: 400px;
    margin-top: 40px;
  }
  .div7-2{
    width: 290px;
    height: 350px;
    float: left;
    margin-top: 1px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    transition: all .3s;
    /* box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out; */
  }
  .div7-2:hover {
    margin-top: -5px;
    /* box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025); */
    }
  .p4{
    color: #000000;
    font-size: 16px;
    float: left;
    margin-top: 8px;
    margin-left: 5px;
  }
 .p4-1{
    color: #000000;
    font-size: 14px;
    float: right;
    margin-top: 7px;
    margin-right: 187px;
  }
  .p4-2{
    width: 100%;
    height: 30px;
    float: right;
    color: #000000;
    font-size: 14px;
    margin-top: -8px;
    margin-left: 10px;
  }
 .p4-3{
    width: 96%;
    height: 60px;
    float: left;
    color: #000000;
    font-size: 14px;
    margin-top: -9px;
    margin-left: 7px;
    /* background-color: #ada9a9; */
    border-top: 1px solid #ada9a9;
    
  }
  .div7-3{
    width: 290px;
    height: 375px;
    float: left;
    margin-top: 1px;
    margin-left: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    transition: all .3s;
    /* box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out; */
  }
  .div7-3:hover {
    margin-top: -5px;
    /* box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025); */
    }

.div8{
    width: 1200px;
    height: 300px;
    margin-top: 40px;
  }
  .div8-2{
    width: 290px;
    height: 240px;
    float: left;
    margin-top: 1px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    /* transition: all .3s; */
    box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out;
  }
  .div8-2:hover {
    /* margin-top: -5px; */
    box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025);
    }
    .p5{
    color: #000000;
    font-size: 16px;
    float: left;
    margin-top: 15px;
    margin-left: 5px;
  }
  .div8-3{
    width: 290px;
    height: 240px;
    float: left;
    margin-top: 1px;
    margin-left: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    /* transition: all .3s; */
    box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out;
  }
  .div8-3:hover {
    /* margin-top: -5px; */
    box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025);
    }

    .div9{
    width: 1200px;
    height: 400px;
    margin-top: 40px;
  }
  .div9-2{
    width: 290px;
    height: 350px;
    float: left;
    margin-top: 1px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    transition: all .3s;
    /* box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out; */
  }
  .div9-2:hover {
    margin-top: -5px;
    /* box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025); */
    }
  .p6{
    color: #000000;
    font-size: 16px;
    float: left;
    margin-top: 8px;
    margin-left: 5px;
  }
 .p6-1{
  color: #000000;
    font-size: 14px;
    float: right;
    margin-top: 7px;
    margin-right: 187px;
  }
  .p6-2{
    width: 100%;
    height: 30px;
    float: left;
    color: #000000;
    font-size: 14px;
    margin-top: -8px;
    margin-left: 5px;
  }
 .p6-3{
    width: 96%;
    height: 60px;
    float: left;
    color: #000000;
    font-size: 14px;
    margin-top: -9px;
    margin-left: 7px;
    /* background-color: #ada9a9; */
    border-top: 1px solid #ada9a9;
    
  }
  .div9-3{
    width: 290px;
    height: 375px;
    float: left;
    margin-top: 1px;
    margin-left: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    transition: all .3s;
    /* box-shadow: -10px -10px var(--color-1),
              15px 10px var(--color-2);
 transition: box-shadow 0.25s ease-in-out,
              transform 0.25s ease-in-out; */
  }
  .div9-3:hover {
    margin-top: -5px;
    /* box-shadow: -10.275px -10.275px var(--color-1),
              15.4px 10.275px var(--color-2);
    transform: scale(1.025); */
    }
</style>